<template>
	<div style="width:100vw; height:100vh;position:relative;" class="login">
		<div id="app">
			<!-- <vue-particles color="#fff" :particleOpacity="0.7" :particlesNumber="80" shapeType="star" :particleSize="4"
				linesColor="#fff" :linesWidth="1" :lineLinked="true" :lineOpacity="0.4" :linesDistance="150" :moveSpeed="3"
				:hoverEffect="true" hoverMode="grab" :clickEffect="true" clickMode="remove" class="beijingtu">
			</vue-particles>
			<router-view></router-view> -->
			<!-- <img src="../../assets/img/loginBg.png" alt="" style="width: 100%;height: 100%;"> -->
		</div>
		<div class="headers">
			<el-row>
				<el-col :span="3" style="margin-left:5%;">

				</el-col>
				<el-col :span="8" style="margin-left:5%;margin-top:15px">
					<div>爸爸的果园大数据</div>
				</el-col>
			</el-row>
		</div>

		<!-- <img src="../../assets/img/rotateBj.png" class="rotateBj" alt="">
		<img src="../../assets/img/rotate.png" class="rotate" alt=""> -->

		<div class="suspend">
			<div class="login-wrap">
				<div class="ms-login">
					<div class="ms-title1">Hi！欢迎使用</div>
					<div class="ms-title">爸爸的果园大数据 </div>
					<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="0px" class="ms-content">


						<el-form-item prop="phone">
							<div style="display: flex;border-bottom: 1px solid #f6f6f649;">
								<i class="el-icon-user-solid" style="color: #409EFF;line-height: 30px;"></i>
								<el-input v-model="ruleForm.username" placeholder="用户名"
									style="background-color: rgba(255,255,255,0);">
								</el-input>
							</div>
						</el-form-item>
						<el-form-item prop="password">
							<div style="display: flex;border-bottom: 1px solid #f6f6f649;">
								<i class="el-icon-lock" style="color: #409EFF;line-height: 30px;"></i>
								<el-input type="password" placeholder="密码" v-model="ruleForm.password"
									@keyup.enter.native="submitForm()" class="input">
								</el-input>
							</div>
						</el-form-item>
						<el-form-item prop="num">
							<el-row :span="24" style="border-bottom: 1px solid #f6f6f649;">
								<!-- <el-col :span="2">1111</el-col> -->
								<el-col :span="14">
									<el-input v-model.trim="ruleForm.num" auto-complete="off"
										placeholder="请输入验证码"></el-input>
								</el-col>
								<el-col :span="10">
									<div class="login-code" @click="init">
										<!--验证码组件-->
										<s-identify :identifyCode="identifyCode"></s-identify>
									</div>
								</el-col>
							</el-row>
						</el-form-item>
						<div class="login-btn">
							<el-button type="primary" @click="submitForm('ruleForm')" class="button">登录</el-button>
						</div>
					</el-form>
				</div>
			</div>
		</div>
		<div class="footer">
			<!-- <p>技术支持：原链科技</p> -->
		</div>
		<div class="pof">
			<img src="../../assets/img/xz.png" alt="" class="xz">
			<img src="../../assets/img/ping.png" alt="" class="poa">
		</div>
	</div>
</template>

<script>

import axios from "axios"
import { logins, goverment_check, user_checkCode } from '@/request/api'
import SIdentify from '../common/authcode'
export default {
	inject: ['reload'],
	components: { SIdentify },
	data: function () {
		return {
			isgt: false,
			identifyCodes: 'z645xcvbnml786kjhfgda453sqerty579uiop12347890',
			identifyCode: "",
			code: '',
			ruleForm: {
				username: '',
				password: '',
				num: ''
			},
			rules: {
				username: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
				password: [{ required: true, message: '请输入密码', trigger: 'blur' }],

			},
		};
	},

	created() {
		// var httpurl = "http://" + window.location.host + "/control/"
		// localStorage.setItem("requestUrl",httpurl)
		// localStorage.setItem("requestUrl","https://bbgy.cpzsyun.com:82/api/plant/")
		localStorage.setItem("requestUrl", "https://bbgy.cpzsyun.com:82/api/plant/")
	},
	mounted() {
		this.init()
	},
	methods: {
		init() {
			// axios.get("https://bbgy.cpzsyun.com:82/api/plant/user/checkCode").then((res) => {
			axios.get("https://bbgy.cpzsyun.com:82/api/plant/user/checkCode").then((res) => {
				this.identifyCode = res.data.data
			})
		},
		submitForm(formName) {
			this.$refs[formName].validate((valid) => {
				if (valid) {
					let data = {
						username: this.ruleForm.username,
						password: this.ruleForm.password,
						checkCode: this.ruleForm.num,
						type: 'fruit'
					}
					// axios.post("https://bbgy.cpzsyun.com:82/api/plant/user/logins", data).then(arr => {
					axios.post("https://bbgy.cpzsyun.com:82/api/plant/user/logins", data).then(arr => {
						sessionStorage.setItem('userName',this.ruleForm.username)
						sessionStorage.setItem('password',this.ruleForm.password)
						var res = arr.data
						if (res.appMenus && res.appMenus.length > 0) {
							this.$notify({
								title: '提示',
								message: '登录成功',
								type: 'success',
								duration: 1000
							});
							const list = [];
							if (res.userInfo.userType === "GOV") {
								for (let r = 0; r < res.appMenus.length; r++) {
									if (res.appMenus[r].appId === "001") {
										list.push(res.appMenus[r])
									}
								}
								localStorage.setItem("zh_type", "GOV")
								res.appMenus = list
								this.$util.set("userInfo", res);
							} else {
								this.$util.set("userInfo", res);
							}

							localStorage.setItem("loginname", res.userInfo.name)
							localStorage.setItem("headImg", res.userInfo.headImg)
							localStorage.setItem("companyId", res.userInfo.companyId)
							localStorage.setItem("userType", res.userInfo.userType)
							// localStorage.setItem("requestUrl",res.appMenus[0].appUrl)
							goverment_check(res.userInfo.companyId).then((res) => {
								this.$store.commit("setlogoimg", res.data.logoImg)
								this.$store.commit("setlogozImg", res.data.logozImg)

							})
							console.log(res.appMenus[0].appId)
							if (res.appMenus[0].appId === "001") {
								// localStorage.setItem("requestUrl","https://bbgy.cpzsyun.com:82/api/control/")
								localStorage.setItem("requestUrl", "https://bbgy.cpzsyun.com:82/api/control/")
								var r = localStorage.getItem("requestUrl")
							} else if (res.appMenus[0].appId === "002") {
								// localStorage.setItem("requestUrl","https://bbgy.cpzsyun.com:82/api/plant/")
								localStorage.setItem("requestUrl", "https://bbgy.cpzsyun.com:82/api/plant/")
							} else if (res.appMenus[0].appId === "003") {
								// localStorage.setItem("requestUrl","https://bbgy.cpzsyun.com:82/api/breed/")
								localStorage.setItem("requestUrl", "https://bbgy.cpzsyun.com:82/api/breed/")
							} else if (res.appMenus[0].appId === "004") {
								localStorage.setItem("lj", "生产")
								localStorage.setItem("requestUrl", "https://bbgy.cpzsyun.com:82/api/produce/")
							} else if (res.appMenus[0].appId === "007") {
								// localStorage.setItem("requestUrl","https://bbgy.cpzsyun.com:82/api/produce/")
								localStorage.setItem("requestUrl", "https://bbgy.cpzsyun.com:82/api/produce/")
							}
							// this.reload()
							this.$store.commit("setuserid", res.userInfo.id)
							localStorage.setItem('ms_username', this.ruleForm.username);
							localStorage.setItem('ms_id', res.userInfo.id);
							// localStorage.setItem('tabtype',"sss")
							sessionStorage.setItem('setTabStatus', "sss")
							// this.$store.commit("setTabStatus","sss")32
							this.$store.commit('setname', this.ruleForm.username)
							this.$store.commit('settoken', res.token)
							if (res.appMenus[0].appId === "004") {
								localStorage.setItem("lj", "生产")
							} else {
								localStorage.setItem("lj", "1")
							}

							if (res.appMenus[0].configMenus.length > 0) {
								localStorage.setItem("system", "show")
								this.$store.commit("setsystem", res.appMenus[0].configMenus)
							} else {
								localStorage.removeItem("system")
							}
							// console.log(res.appMenus)
							this.$router.push({ path: '/home' });
							// this.reload()
						} else {
							this.$notify({
								title: '提示',
								message: '没有应用权限,请联系管理员开通',
								type: 'error',
								duration: 1000
							});
						}
					})
				} else {
					return false
				}
			})
		},
	},
};
</script>

<style scoped>
.login {
	background-image: url('../../assets/img/loginBg.png');
}

.button {
	height: 48px;
	/* background: linear-gradient(to left, #09A5CC 0%, #03E4F0 100%); */
	border-radius: 24px;
}

.rotateBj {
	position: absolute;
	width: 728px;
	height: 585px;
	left: 36px;
	top: 150px;
	animation: round_animateS 40s linear infinite;
}

@keyframes round_animateS {
	to {
		transform: rotate(-360deg);
	}
}

.rotate {
	position: absolute;
	width: 771px;
	height: 610px;
	left: 15px;
	top: 137px;
	animation: round_animate 40s linear infinite;
}

@keyframes round_animate {
	to {
		transform: rotate(1turn);
	}
}

.suspend {
	position: absolute;
	right: 20%;
	top: 0;
}

.beijingtu {
	background-image: url(../../assets/img/login6.png);
	/*background-size: 100%;*/
	background-size: cover;
	background-repeat: no-repeat;
}

.footer {
	width: 100%;
	height: 4vh;
	bottom: 20px;
	position: absolute;
	text-align: center;
	line-height: 4vh;
	font-size: 14px;
	color: white;
}

.headers {
	width: 100%;
	height: 5vh;
	top: 0;
	left: 0;
	position: absolute;
	z-index: 9999;
	color: #fff;
	font-family: PingFangSC-Medium, PingFang SC;
	font-weight: 500;
	font-size: 25px;
	/* background:rgba(255, 255, 255, 0.5); */
	line-height: 8vh;
}

.login-wrap {
	position: relative;
	width: 100%;
	height: 100vh;

	/* background-image: url(../../assets/img/login-bg.jpg); */
	background-size: 100%;
}

.ms-title {
	width: 100%;
	line-height: 30px;
	/* text-align: center; */
	font-size: 20px;
	color: #fff;
	margin-left: 30px;
	margin-bottom: 40px;
	/* border-bottom: 1px solid #ddd; */
}

.ms-title1 {
	width: 100%;
	line-height: 30px;
	/* text-align: center; */
	font-size: 18px;
	color: #fff;
	margin-left: 30px;
	margin-top: 30px;
}

.ms-login {
	position: absolute;
	right: -250px;
	top: 150px;
	width: 420px;
	height: 622px;
	padding: 60px;
	padding-bottom: 26px;
	/* margin: -190px 0 0 -175px; */
	border-radius: 5px;
	background: #1c1e2196;
	border-radius: 4px;
	/* background: rgba(255, 255, 255, 0.3); */
	overflow: hidden;
	border: 1px #BBE2FF solid;
	box-shadow: 0px 0px 10px #27A6FF;
}

.ms-content {
	padding: 30px 30px;
}

.login-btn {
	text-align: center;
}

.login-btn button {
	width: 100%;
	height: 36px;
	margin-bottom: 10px;
	margin-top: 30px;
	background-color: #409EFF;
}

.login-tips {
	font-size: 12px;
	/* line-height: 30px; */
	margin-top: 40px;
	margin-left: -20px;
	text-align: center;
	color: #fff;
	position: absolute;
	bottom: 26px;
	width: 420px;
}

.pof{
	position: fixed;
	left: 20px;
	bottom: 40px;
}
.xz{
	width: 209px;
	height: 169px;
}
.poa{
	width: 124px;
	height: 104px;
	position: absolute;
	top: 32px;
	left: 43px;
}
</style>
<style lang="less">
.login {
	.el-input__inner {
		width: 200px !important;
		height: 28px !important;
		line-height: 28px !important;
		background: rgba(255, 255, 255, 0) !important;
		border: 0 !important;
		color: #fff;
	}
}
</style>
